<template>
	<view class="user">
		<view class="user-bg">
			<image src="@/static/imgs/my/setting_top.png" mode="" class="setting_top" @tap="gopath('setting/index')">
			</image>
			<view class="userinfo">
				<view class="info-image">
					<image :src="avatar" mode="" class="image-img"></image>
				</view>
				<view class="info-box">
					<view class="box-name">

						<text class="name" v-if="nickname!=''">Hi {{nickname}}</text>
						<text class="name" v-else>{{telnumber}}</text>
						<image src="@/static/imgs/my/my_bianji.png" mode="" class="bianji"
							@tap="gopath('setting/setuserinfo')"></image>
					</view>
					<view class="box-userid">
						<text>UID:{{Uid}}</text>
					</view>
					<view class="box-title">
						<text>{{t('user.todaytext')}}{{getime}}{{t('user.days')}}</text>
					</view>
				</view>
			</view>
			<view class="signcenter">
				<text class="sign-title">{{t('user.signcenter')}}</text>
				<view class="sign-box">
					<view class="but-box left" @tap="gopath('')">
						{{t('user.checkIn')}}
						<image src="@/static/imgs/my/Sign_in.png" mode="" class="but-image"></image>
					</view>
					<view class="but-box right" @tap="gopath('')">
						{{t('user.Redeem')}}
						<image src="@/static/imgs/my/Redeem.png" mode="" class="but-image"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="my_list">
			<view class="list_li" v-for="(item,index) in mylist" @tap="gopath(item.path)">
				<view class="li-left">
					<image :src="item.icon" mode="" class="left-icon"></image>
					<text class="left-text">{{t(item.text)}}</text>
				</view>
				<image src="@/static/imgs/my/arrow_right.png" mode="" class="li-right"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import myRealname from '@/static/imgs/my/Real_name.png'
	import cserive from '@/static/imgs/my/c_serive.png'
	import invite from '@/static/imgs/my/invite.png'
	import safe from '@/static/imgs/my/safe.png'
	import profile from '@/static/imgs/my/profile.png'
	import setting from '@/static/imgs/my/setting.png'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ucInfo
	} from '@/api/setuserinfo/setuserinfo.js'
	import {
		ucAuthCheck
	} from '@/api/realName/realName.js'
	import {
		urlConversion
	} from '@/utils/imgUrl.js'
	import {
		computed,
		reactive,
		ref
	} from "vue"
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n()
	const nickname = ref()
	const avatar = ref()
	const createtime = ref()
	const Uid = ref()
	const telnumber = ref()
	const getuserinfo = () => {
		ucInfo().then(res => {
			uni.setStorageSync('userInfo',res.data)
			nickname.value = res.data.nickname
			Uid.value = res.data.id
			createtime.value = res.data.created_at
			telnumber.value = res.data.mobile
			avatar.value = urlConversion(res.data.avatar)
		})
	}

	const getime = computed(() => {
		let startTime = new Date(createtime.value).getTime()
		let endTme = new Date().getTime()
		let dates = Math.abs((startTime - endTme)) / (1000 * 60 * 60 * 24);
		return Math.round(dates) + 1
		// console.log(days);
	})

	onShow(() => {
		getuserinfo()
	})
	const mylist = [{
			text: 'user.realName',
			icon: myRealname,
			path: 'real-name-authentication/real-name-form'
		},
		// {
		// 	text: '联系客服',
		// 	icon: cserive,
		// 	path: ''
		// },
		// {
		// 	text: '邀请好友',
		// 	icon: invite,
		// 	path: 'inivte/inivite'
		// },
		{
			text: 'user.safe',
			icon: safe,
			path: 'account_safe/safe'
		},
		{
			text: 'user.aboutUs',
			icon: profile,
			path: 'aboutus/index'
		},
		{
			text: 'user.setting',
			icon: setting,
			path: 'setting/index'
		}
	]
	const unopen = () => {
		uni.showToast({
			icon: 'none',
			title: t('user.Notopenyet'),
		});
	}

	const gopath = (path) => {
		if (!path) return unopen()
		if (path) {
			if (path == 'real-name-authentication/real-name-form') {
				ucAuthCheck().then(res => {
					console.log(res)
					if (res.data.verified) {
						uni.navigateTo({
							url: '/pages/user/real-name-authentication/examine',
						});

					} else {
						uni.navigateTo({
							url: path,
						});

					}
				})
			} else {
				uni.navigateTo({
					url: path,
				});
			}

		}
	}
</script>
<style scoped lang="scss">
	.user {
		width: 100%;
		background: #F2F4F7;
		min-height: 100vh;


	}

	.my_list {
		z-index: 999;
		margin: 0 auto;
		margin-top: 160rpx;
		width: 686rpx;
		padding: 36rpx;
		padding-top: 0;
		padding-bottom: 0;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);

		.list_li:last-child {
			border-bottom: none;
		}

		.list_li {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: content-box;
			padding-top: 36rpx;
			padding-bottom: 36rpx;
			border-bottom: 1px solid rgba(242, 244, 247, 1);

			.li-right {
				height: 26rpx;
				width: 14rpx;

			}

			.li-left {
				display: flex;
				align-items: center;

				.left-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}

				.left-text {
					font-size: 16px;
					font-weight: 500;
					letter-spacing: 0px;
					line-height: 22.4px;
					color: rgba(102, 102, 102, 1);
				}
			}
		}
	}

	.user-bg {
		position: relative;
		width: 100%;
		padding-top: 200rpx;
		height: 568rpx;
		border-radius: 0 0 600rpx 600rpx / 0 0 200rpx 200rpx;
		background: url(@/static/imgs/my/bg_top.png) no-repeat;
		background-size: cover;

		.signcenter {
			margin: 0 auto;
			margin-top: 64rpx;
			padding: 24rpx;
			width: 686rpx;
			height: 326rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			opacity: 1;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);

			.sign-title {
				font-size: 30rpx;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 22.5px;
				color: rgba(0, 0, 0, 1);
				text-align: left;
				vertical-align: top;
			}

			.sign-box {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.but-box {
					position: relative;
					width: 48%;
					height: 138rpx;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					border-radius: 12rpx;
					font-size: 32rpx;
					font-weight: 500;
					letter-spacing: 0px;
					line-height: 44rpx;
					padding-bottom: 14rpx;

					.but-image {
						position: absolute;
						left: 50%;
						top: 0;
						transform: translate(-50%, -50%);
						width: 150rpx;
						height: 150rpx;
					}
				}

				.left {
					background: #F3F7FF;

					color: rgba(11, 58, 126, 1);
				}

				.right {
					background: #FAF5F0;
					color: rgba(207, 122, 48, 1);
				}
			}
		}

		.setting_top {
			position: absolute;
			right: 40rpx;
			top: 110rpx;
			width: 40rpx;
			height: 40rpx;
		}

		.userinfo {
			margin-left: 40rpx;

			display: flex;

			.info-box {
				display: flex;
				flex-direction: column;

				.box-userid {
					font-size: 24rpx;
					font-weight: 500;
					letter-spacing: 0px;
					line-height: 24rpx;
					color: rgba(255, 255, 255, 1);
					margin-bottom: 10rpx;
				}

				.box-title {
					font-size: 20rpx;
					font-weight: 500;
					letter-spacing: 0px;
					line-height: 24rpx;
					color: rgba(255, 255, 255, 1);

				}

				.box-name {
					display: flex;
					align-items: center;

					.name {
						font-size: 18px;
						font-weight: 700;
						letter-spacing: 0px;
						line-height: 27px;
						color: rgba(255, 255, 255, 1);
						margin-right: 28rpx;
					}

					.bianji {
						width: 28rpx;
						height: 28rpx;

					}
				}
			}

			.info-image {
				margin-right: 20rpx;
				width: 116rpx;
				height: 116rpx;
				background-color: #fff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.image-img {
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
				}
			}
		}
	}
</style>